<template>
  <div>
    <SearchBar :option="searchProps" @search="handleSearch"/>
    <div style="margin-left: auto; margin-bottom: 20px">
      <el-button plain type="primary" @click="() => materAddVisible = true">+ 添加采集器</el-button>
    </div>
    <el-table :data="list">
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="编号" prop="number"></el-table-column>
      <el-table-column label="更新时间" prop="onlineUpdateDate"></el-table-column>
      <el-table-column label="采集器状态" prop="online">
        <template #default="{ row }">
          <el-tag v-if="row.online === '1'" type="success">在线</el-tag>
          <el-tag v-else-if="row.online === '2'" type="danger">离线</el-tag>
          <el-tag v-else type="info">未知</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <div class="flex-row-center">
            <el-button link type="primary" @click="handleMaterEdit(row)">编辑</el-button>
            <el-button link type="primary" @click="handleRemove(row)">删除</el-button>
<!--            <el-dropdown trigger="click" placement="bottom-start" @command="moreCommand($event, row)">-->
<!--              <el-button link type="primary">更多</el-button>-->
<!--              <template #dropdown>-->
<!--                <el-dropdown-menu>-->
<!--                  <el-dropdown-item command="useRecord">用电记录</el-dropdown-item>-->
<!--                  <el-dropdown-item command="oprRecord">操作记录</el-dropdown-item>-->
<!--                  <el-dropdown-item command="switch">切换预付费</el-dropdown-item>-->
<!--                  <el-dropdown-item command="setting">设置功率阈值</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->
<!--              </template>-->
<!--            </el-dropdown>-->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <OperationRecordDw ref="operationRef" />
    <SettingDl :visible="settingVisible" @ok="handleSettingOk" @cancel="handleSettingCancel" />
    <CollectEdit :visible="materEditVisible" :row="selectRow" @ok="handleMaterEditOk" @cancel="handleMaterEditCancel" />
    <CollectAdd :visible="materAddVisible" :row="selectRow" @ok="handleCollectAddOk" @cancel="handleCollectAddCancel" />
    <AssociationRoomDrawer
      ref="associationRoomRef"
      :visible="accociation.visible"
      :deviceType="accociation.deviceType"
      :is-public="accociation.isPublic"
      :data="accociation.data"
      :total="accociation.total"
      v-model:page="accociation.pageNum"
      v-model:limit="accociation.pageSize"
      @pagination="handleGetAssociationList"
      @cancel="() => accociation.visible = false"
    />
  </div>
</template>
<script setup>
import SearchBar from '../component/searchBar.vue'
import { useRouter } from 'vue-router'
import OperationRecordDw from './operationRecordDw.vue'
import SettingDl from './settingDl.vue'
import AssociationRoomDrawer from '../component/associationRoomDrawer.vue'
import CollectEdit from './collectEdit.vue'
import CollectAdd from './collectAdd.vue'
import { getList as getCollectList, remove } from '@/api/device/collect'

const { proxy } = getCurrentInstance()
const router = useRouter()

const loading = ref(false)
const total = ref(0)
const list = ref([])
const row = ref({})
const queryParams = ref({})
const selectRow = ref({})
const settingVisible = ref(false)
const materEditVisible = ref(false)
const materAddVisible = ref(false)
const pageNum = ref(1)
const pageSize = ref(10)
const searchProps = ref({
  smartMeterType: true,
  searchStr: {
    show: true,
    key: 'name',
    placeholder: '请输入电表名称、电表号'
  }
})
const data = reactive({
  accociation: {
    deviceType: 1,
    isPublic: false,
    data: [],
    total: 0,
    pageNum: 1,
    pageSize: 20,
    visible: false
  }
})
const { accociation } = toRefs(data)
/* 搜索 */
function handleSearch(params) {
  pageNum.value = 1
  queryParams.value = { 
    ...queryParams.value, 
    ...params,
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  getList()
}

function handleRemove(row) {
  proxy.$modal.confirm('确定删除采集器？').then(() => {
    return true
  }).then(() => {
    remove(row.collectId).then(res => {
      proxy.$modal.msgSuccess('删除成功');
      getList()
    })
  }).catch(() => {})
}

// 更多操作按钮
function moreCommand(value, row) {
  switch (value) {
    case 'useRecord':
      proxy.$refs['useRecordRef'].show()
      break
    case 'oprRecord':
      proxy.$refs['operationRef'].show()
      break
    case 'switch':
      handleSwitch(row)
      break
    case 'setting':
      handleSetting(row)
      break
    default:
      break;
  }
}

/* 历史记录 */
function handleHistoryRecord() {
  proxy.$refs['historyRecordRef'].show()
}

/* 关联房间 */
function associationRoom(row) {
  accociation.value.isPublic = false
  handleGetAssociationList()
  accociation.value.visible = true
}
// 获取列表数据
function handleGetAssociationList() {
  let floor = accociation.value.pageNum
  let data = new Array(20).fill(1).map((item, index) => {
    let number = index + 1
    let roomNumber = floor + (number < 10 ? '0' + number : number.toString() )
    return {
      roomName: '泰寓' + roomNumber,
      id: roomNumber
    }
  })
  accociation.value.data = data
  accociation.value.total = 60
}

/* 切换预付费 */
function handleSwitch(row) {
  proxy.$modal.confirm('确认切换成预付费电表？')
    .then(res => {
      console.log('切换预付费');
    })
    .catch(() => {
      console.log('取消');
    })
}

/* 设置功率阈值 */
function handleSetting(row) {
  selectRow.value = row
  settingVisible.value = true
}
function handleSettingOk(value) {
  console.log(value);
  settingVisible.value = false
}
function handleSettingCancel() {
  settingVisible.value = false
  selectRow.value = {}
}

/* 编辑 */
function handleMaterEdit(row) {
  selectRow.value = row
  materEditVisible.value = true
}
function handleMaterEditOk(value) {
  materEditVisible.value = false
  getList()
}
function handleMaterEditCancel() {
  materEditVisible.value = false
}

function handleCollectAddOk() {
  materAddVisible.value = false
  getList()
}
function handleCollectAddCancel() {
  materAddVisible.value = false
}

function handleSizeChange(val) {
  pageSize.value = val
  getList()
}

function handleCurrentChange(val) {
  pageNum.value = val
  getList()
}

function getList() {
  list.value = []
  const params = {
    ...queryParams.value,
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  getCollectList(params).then((res) => {
    if (res.code === 200) {
      list.value = res.rows
      total.value = res.total
    }
  })
}
getList()
</script>
